<template>
	<view class="page">
		<!-- <u-tabs :list="tagList" @click="selectTab"></u-tabs> -->

		<view class="list">
			<view v-for="(item,index) in list" class="item">
				
			 
				<view class="left">
					<image :key="index" :src="item.image1" mode="aspectFill"></image>
				</view>

				<view class="right">
					<view class="title">{{item.theme}}</view>
					<u--text lineHeight="15" color="#C0C0C0" size="12" :text="'地点：'+ item.address"></u--text>
					<u--text lineHeight="20" color="#C0C0C0" size="12"
						:text="'人数:'+ item.join_total_member +'/' + item.min_member "></u--text>
					<u-text lineHeight="20" color="#C0C0C0" size="12"
						:text="'时间：'+item.apply_starttime + ' - ' + item.apply_endtime"></u-text>

					<u--text v-if="item.event_status == 0" type="primary" size="13" text="组局"></u--text>
					<u--text v-if="item.event_status == 1" type="error" size="13" text="成局"></u--text>
					<u--text v-if="item.event_status == 2" type="warning" size="13" text="流局"></u--text>
				</view>
		 
				
				
				<u-line style="clear: both;"></u-line>
				
				<view style="width: 100%;">
					<u-row customStyle="margin:20rpx 15rpx 20rpx 15rpx">
							<button class="youqu-color" size="mini" @click="edit(item)">编辑活动</button>
							<button class="youqu-color" size="mini" @click="personnel(item)">组局人员</button>
							<button class="youqu-color" size="mini" @click="creatnotice(item)">群发通知</button>
					</u-row>
				</view>
				
				
			</view>
			

			
			
		</view>

		<view style="position: fixed;bottom: 0;width: 100%;z-index: 999;color: black;">
			<u-button  customStyle="background-color: #ffd91d"  text="新建组局" @click="add"></u-button>
		</view>
	</view>

</template>

<script>
	import * as Config from '@/utils/config.js';
	import * as EventApi from '@/api/event.js';
	import dayjs from 'dayjs';
	export default {
		components: {

		},
		data() {
			return {
				list: [],
				tagList: [{
					name: '全部'
				}],
				sdata: {
					page: 1,
					tag: '全部'
				}
			}
		},
		onLoad() {
			this.getList()
			// this.getTags()
		},
		onReachBottom() {
			this.sdata.page++
			this.getList()
		},
		onPullDownRefresh() {
			this.sdata.page = 1
			this.list = []
			this.getList()
		},
		methods: {
			selectTab(item) {
				this.sdata.tag = item.name
				this.getList()
			},

			getTags() {
				EventApi.tags().then(res => {
					let list = res.info.tag.split(',')
					list.forEach(e => {
						this.tagList.push({
							name: e
						})
					})

				})
			},
			add() {
				uni.navigateTo({
					url: '/pages/activity/add'
				})
			},
			edit(item) {
				uni.navigateTo({
					url: '/pages/activity/edit?id=' + item.nid
				})
			},
			creatnotice(item) {
				console.log("creatnotice",item)
				uni.navigateTo({
					url: '/pages/activity/creatnotice?id=' + item.nid,
					//url: '/pages/activity/edit?id=' + item.nid
				})
			},
			personnel(item) {
				uni.navigateTo({
					url: '/pages/activity/personnel?id=' + item.nid
				})
			},
			getList() {
				let that = this;
				EventApi.leader_manage_list(that.sdata).then(res => {
					that.list = that.list.concat(res.info)
					uni.stopPullDownRefresh()
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.date-btn {
		position: relative;
		text-align: center;
		width: 70rpx;
		margin: 10rpx;
		padding: 15rpx 5rpx;
		box-shadow: 0 0 10rpx #888888;
		border-radius: 12rpx;
		font-size: 32rpx;
	}

	.youqu-color {
		background-color: #ffd91d;
	}

	.list {
		padding-top: 20rpx;
		padding-bottom: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

		.item {
			border-radius: 15rpx;
			background-color: #FFFFFF;
			margin-bottom: 40rpx;
			box-shadow: 0 0 15rpx #C0C0C0;
			padding-bottom:8rpx;
			 



			.left {
				width: 250rpx;float: left;

				image {
					width: 230rpx;
					height: 230rpx;
					margin: 10rpx;
				}
			}

			.right {
				width: 425rpx;float: left;
			}

			image {
				width: 100%;
				height: 320rpx;
				border-radius: 15rpx 15rpx 0 0;
			}

			.avatar-list {
				padding: 20rpx;
			}

			.title {
				width: 410rpx;
				font-size: 32rpx;
				line-height: 42rpx;
				font-weight: bold;
				margin: 10rpx 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

			}

			.name {
				float: left;
				font-size: 30rpx;
				font-size: bold;
				margin-right: 20rpx;
				width: 80rpx;
				text-align: right;
			}

			.content {
				float: left;
				font-size: 32rpx;
				line-height: 80rpx;
				color: #A0A0A0;
			}
		}

	}
</style>